@layout('layouts/clear')

@section('content')
<div  id="signUp" class="row page_wrap" style="margin-top:10px;">
    @include('plugins.errorPlugins')
    <div class="twelve panel">
        <h3><span class="center_bg">User Registration Form</span></h3>
    </div>
    {{ Form::open_for_files('auth/signup', 'POST') }}
    <div class="twelve columns panel">
        <div  class="four columns">
            <div class="twelve">
                <h6><span class="center_bg">Profile Photo</span></h6>
                <div id="profileImage" >
                    <div class="imgContainer">
                        {{ HTML::image('avatar/avatar.png','user photo',array('id'=>'photo')) }}
                    </div>   
                    <div style="padding:5px">
                        {{ Form::file('imgpath',array('onchange'=>"handleFiles(this.files);")) }}
                        <p><em>Image size:</em>&nbsp;<em id="fileSize">0</em><br/><em>Max size 2 Mib</em></p>
                        
                    </div>
                </div>
            </div>
            <div class="heading_dots hide-for-small">&nbsp;</div> 
            <div  class="twelve">
                <h6><span class="center_bg">Login Information</span></h6>
    			{{ Form::label('username', 'Username')}}
    			{{ Form::text('username') }}
    			{{ Form::label('password', 'Password') }}
                {{ Form::password('password') }}
            </div>
        </div>
        <div  class="eight columns">
            <div  class="twelve">
                <h6><span class="center_bg">Personal Information</span></h6>
                {{ Form::label('name', 'Name',array('class'=>'required')) }}
                {{ Form::text('fullname') }}
                {{ Form::label('dob', 'Date of Birth') }}
                {{ Form::text('dob') }}
                {{ Form::label('emel', 'Email') }}
                {{ Form::text('emel') }}
                {{ Form::label('address', 'Address') }}
                {{ Form::textarea('address') }}
                {{ Form::label('postcode', 'Postcode') }}
                {{ Form::text('postcode') }}
            </div>
        </div>
    </div>
    <div class="twelve centered">
        <span class="center">{{ Form::submit('Sign Up!')}}</span>
    </div>
    {{ Form::close()}}
</div>
@endsection
@section('scripts')
<script>
jQuery(document).ready(function($) {
    $( "[name='dob']" ).datepicker({
      changeMonth: true,
      changeYear: true,
      showButtonPanel: true,
      dateFormat: 'dd-mm-yy'
    });
});
</script>
<script>
function handleFiles(files) {

//ref:https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Showing_thumbnails_of_user-selected_images

  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /image.*/;
     
    if (!file.type.match(imageType)) {
      continue;
    }
  
    $('#photo').remove();

    var img = document.createElement("img");
    var id=document.createAttribute("id");
    id.value="photo";
    img.classList.add("preview");
    img.setAttributeNode(id);
    img.file = file;
    $("div .imgContainer").css("opacity",0.9);
    $(".imgContainer").append(img);

    var nFiles = files.length;
    var nBytes = file.size;

    for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
        sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
    }

    $("p #fileSize").text(sOutput);
     
    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}

</script>
@endsection